/**
 * 对 Ant Design 组件的二次封装
 * 预设了常用的配置 / 样式
 */
import {
  type ModalProps as AntdModalProps,
  Modal as AntdModal,
  Empty as AntdEmpty,
  Table as AntdTable,
  type TableProps,
} from 'antd'
import { bareModal } from '@/desktop/styles'

/**
 * ==================
 * Modal
 * ==================
 *
 * 最佳实践：
 * 1. width 设置成内容最适宜显示的宽度即可，不用怕设的太大显示不下，antd 预置了 max-width 进行兜底。
 */
type ModalProps = AntdModalProps & { children: React.ReactNode }

export function Modal(props: ModalProps) {
  // 填充默认参数
  props = {
    // Modal 原本预设的值，在这列出以避免歧义
    closable: true,
    maskClosable: true,

    // 根据应用需求定制的默认值
    destroyOnClose: true,

    ...props,
  }

  return <AntdModal {...props} />
}

/**
 * 编辑型的表单
 *
 * - 关闭自带 footer，并应用不带 footer 的 modal 样式
 */
export function EditModal(props: ModalProps) {
  return <Modal footer={null} css={bareModal} {...props} />
}

/**
 * 重要的编辑型表单
 *
 * 在编辑型表单的基础上：
 * - 点击 mask 不会关闭对话框（避免误关闭导致编辑内容丢失）
 *
 * 重要型表单因为不能快速关闭，应在 footer 里提供“取消”按钮
 */
export function ImportantEditModal(props: ModalProps) {
  return <EditModal maskClosable={false} {...props} />
}

/**
 * ==================
 * 其他定制过的组件
 * ==================
 */

export function Empty(props: Parameters<typeof AntdEmpty>[0]) {
  return <AntdEmpty image={Empty.PRESENTED_IMAGE_SIMPLE} {...props} />
}
Empty.PRESENTED_IMAGE_DEFAULT = AntdEmpty.PRESENTED_IMAGE_DEFAULT
Empty.PRESENTED_IMAGE_SIMPLE = AntdEmpty.PRESENTED_IMAGE_SIMPLE

export function Table<T extends object>(props: TableProps<T>) {
  props = {
    // 根据应用需求定制的默认值
    tableLayout: 'fixed',
    size: 'middle',

    ...props,
  }
  return <AntdTable<T> {...props} />
}
Table.Column = AntdTable.Column
